<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <span>设备号:</span>
      <el-input
        v-model="listQuery.vin"
        size="small"
        class="filter-item"
        style="width: 200px;"
        clearable
        placeholder="请输入设备编号"
        @keyup.enter.native="handleFind"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleFind"
      >查找
      </el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      size="mini"
      highlight-current-row
    >
      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备号" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.vin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总容量" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.batteryAllCapacity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="SOC" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.soc }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="经度" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.longitude }}</span>
        </template>
      </el-table-column>
      <el-table-column label="纬度" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.latitude }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数据时间" width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.dataTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="在线状态" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.online == 0?"在线":"离线" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="告警情况" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.alarm == 0?"有告警":"无告警" }}</span>
        </template>
      </el-table-column>
      <!--数据操作-->
      <el-table-column label="操作" header-align="center" width="185" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handleView(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <el-pagination
        layout="total, prev, pager, next,sizes, jumper"
        :page-sizes="[10, 20, 30, 50]"
        :current-page.sync="listQuery.current"
        :page-size="listQuery.size"
        :total="listQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 查看数据对话框 -->
    <el-dialog :fullscreen="true" :visible.sync="dialogVisible" center>
      <el-card style="margin-bottom: 20px">
        <el-row>
          <el-col :span="5">
            站点序号:{{ selectedData.vin }}
          </el-col>
          <el-col :span="5">
            名称:{{ selectedData.name }}
          </el-col>
          <el-col :span="5">
            最新数据时间:{{ selectedData.dataTime }}
          </el-col>
        </el-row>
      </el-card>
      <el-table
        :data="batteryVoltage"
        style="width: 100%"
        size="mini"
        highlight-current-row
      >
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数据时间" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dataTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="定位状态" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.locationStatus == 0? "有定位":"无定位" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总容量" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.batteryAllCapacity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SOC" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.soc }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="告警状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.alarm == 0?"有告警":"无告警" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="电池1(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池2(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池3(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池4(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage4 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池5(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage5 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池6(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage6 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池7(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage7 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池8(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage8 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池9(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage9 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池10(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage10 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池11(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage11 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池12(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage12 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池13(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage13 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池14(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage14 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池15(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage15 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池16(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage16 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池17(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage17 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池18(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage18 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池19(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage19 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池20(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage20 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池21(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage21 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池22(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage22 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池23(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage23 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电池24(mv)" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.voltage24 }}</span>
          </template>
        </el-table-column>

      </el-table>
      <!--分页-->
      <div class="block">
        <el-pagination
          layout="total, prev, pager, next,sizes, jumper"
          :page-sizes="[10, 20, 30, 50]"
          :current-page.sync="listQuery1.current"
          :page-size="listQuery1.size"
          :total="listQuery1.total"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { query, getById, getRealTimeById, getHistoryByVin } from '@/api/battery/data'

export default {
  data() {
    return {
      vin: '',
      id: '',
      slaveCommunicationAllToShow: [],
      battery: '80%',
      tableData: [],
      batteryVoltage: [],
      // 选中的弹窗参数
      selectedData: {},
      dialogVisible: false, // 控制弹出框
      realTimeData: {
        user: '',
        SOC: '',
        batteryCapacity: '',
        batteryType: '',
        highTemperature: '',
        iccid: '',
        putTime: '',
        voltage: '',
        electricCurrent: '',
        runStatus: '',
        imei: '',
        dataTime: ''
      },
      historyData: {
        user: '',
        SOC: ''
      },
      activeName: 'realTime',
      listQuery: {
        total: 0,
        current: 1,
        size: 20,
        vin: ''
      },
      listQuery1: {
        total: 0,
        current: 1,
        size: 20,
        vin: ''
      },

      loading: false,
      batteryIdTemp: -1
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.setMychart()
  },
  methods: {
    getList: function() {
      this.loading = true
      query(this.listQuery).then(response => {
        this.loading = false
        this.tableData = response.data.data.records
        this.listQuery.total = response.data.data.total
      })
    },
    handleClick(tab, event) {
      if (tab.paneName === 'history') {
        getHistoryById(this.batteryIdTemp).then(response => {
          if (response.data.code !== 200) {
            this.$message({
              type: 'warning',
              message: '未找到数据'
            })
          } else {
            this.historyData = response.data.data
          }
        })
      }
    },
    setMychart() {
      var myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    },

    // 搜索
    handleFind: function() {
      this.getList()
    },
    handleView(row) {
      this.vin = row.vin
      this.id = row.id
      // 设置选中的行参数，用于在弹窗头部展示
      this.selectedData = row
      this.getHistoryAAAA(this.listQuery1, row.vin)
    },
    // 换页
    handleCurrentChange: function(val) {
      this.listQuery.current = val
      this.getList()
    },
    // 换页数
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    // 换页
    handleCurrentChange1: function(val) {
      this.listQuery.current = val
      this.getHistoryAAAA(this.listQuery1, this.vin)
    },
    // 换页数
    handleSizeChange1(val) {
      this.listQuery.size = val
      this.getHistoryAAAA(this.listQuery1, this.vin)
    },
    refreshTopData(id) {
      getById(id).then(response => {
        this.selectedData = response.data.data
      })
    },
    getBatteryVoltage() {
      return {
        dataTime: '',
        locationStatus: '',
        batteryAllCapacity: '',
        soc: '',
        alarm: '',
        voltage1: '', voltage2: '', voltage3: '', voltage4: '', voltage5: '', voltage6: '',
        voltage7: '', voltage8: '', voltage9: '', voltage10: '', voltage11: '', voltage12: '',
        voltage13: '', voltage14: '', voltage15: '', voltage16: '', voltage17: '', voltage18: '',
        voltage19: '', voltage20: '', voltage21: '', voltage22: '', voltage23: '', voltage24: ''
      }
    },
    getHistoryAAAA(listQuery, vin) {
      getHistoryByVin(listQuery, vin).then(response => {
        if (response.data.code === 200) {
          const test = response.data.data.records
          this.batteryCapacity = []
          this.listQuery1.total = response.data.data.total

          for (let i = 0; i < test.length; i++) {
            this.batteryVoltage[i] = this.getBatteryVoltage()
            this.batteryVoltage[i]['dataTime'] = test[i].dataTime
            this.batteryVoltage[i]['locationStatus'] = test[i].locationStatus
            this.batteryVoltage[i]['batteryAllCapacity'] = test[i].batteryAllCapacity
            this.batteryVoltage[i]['soc'] = test[i].soc
            this.batteryVoltage[i]['alarm'] = test[i].alarm
            // 电池电压
            // 取前24个
            const batteryVoltageList = JSON.parse(test[i].batteryBodyVoltage).batteryVoltageList
            let x = 0
            for (let j = 0; j < batteryVoltageList.length; j++) {
              for (let k = 0; k < batteryVoltageList[j].voltageList.length; k++) {
                if (x < 24) {
                  this.batteryVoltage[i]['voltage' + (++x)] = batteryVoltageList[j].voltageList[k]
                }
              }
            }
          }
          this.dialogVisible = true
        } else {
          this.$message({
            type: 'warning',
            message: '未找到数据'
          })
        }
        this.refreshTopData(this.id)
      })
    }
  }
}
</script>
